<template>
    <div class="zc-table">
        <div class="selectBar" v-show="isSelectBar">
            <i class="el-icon-info"></i> 已选
            <span class="selText">{{selectionNumber}}</span> 项
        </div>
        <!--                    @row-contextmenu="rightClick"-->
        <div>
            <el-table
                    :height="height==undefined?null:height"
                    :data="tableData"
                    ref="serialnoTable"
                    :default-sort="sortFunc"
                    :max-height="maxHeight"
                    header-row-class-name="header-class"
                    v-loading="isLoading"
                    stripe
                    border
                    lazy
                    :highlight-current-row="highlight"
                    @row-contextmenu="addressColClick"
                    row-key="id"
                    default-expand-all
                    :tree-props="{children: children}"
                    style="width: 100%;margin-bottom: 20px;"

            >
                <!-- 我是复选  -->
                <el-table-column v-if="selection" type="selection" fixed="left" width="50"/>

                <!-- 我是表头 -->
                <template v-for="(item) in tableHead" :key="item">
                    <!-- 我是非图片和非pdf 非进度条  非说明列 的普通列 -->
                    <template v-if="item.icon == null ">
                        <el-table-column
                                :align="item.align"
                                :prop="item.prop"
                                :sortable="item.sortable"
                                :label="item.label"
                                :width="item.width"
                                v-if="!item.hidden"
                        />
                    </template>
                    <!-- 图标 -->
                    <template v-if="item.icon">
                        <el-table-column
                                :align="item.align"
                                :prop="item.prop"
                                :sortable="item.sortable"
                                :label="item.label"
                                :width="item.width"
                                v-if="!item.hidden"
                        >
                            <template v-slot="scope">
                                    <el-icon :class="scope.row[item.prop]"/>
                            </template>
                        </el-table-column>
                    </template>

                </template>

                <el-table-column
                        label="扩展信息"
                        width="180"
                        show-overflow-tooltip>
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="top">
                            <template #default show-overflow-tooltip>
                                <p>创建人: {{ scope.row.createBy }}</p>
                                <p>创建日期: {{ scope.row.createTime }}</p>
                                <p>更新人: {{ scope.row.updateBy }}</p>
                                <p>更新日期: {{ scope.row.updateTime }}</p>
                                <p>备注: {{ scope.row.createBy }}</p>
                            </template>
                            <template #reference>
                                <div class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.createTime }}</el-tag>
                                </div>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>

                <!-- 我是操作栏 -->
                <el-table-column
                        label="操作"
                        fixed="right">
                    <div>
                        <!-- 当按钮小于等于2个-->
                        <template v-for="action in actionsData.btnGroup" :key="action">
                            <el-button
                                    type="text"
                                    :icon="action.icon"
                                    size="small">
                                {{action.label}}
                            </el-button>
                        </template>
                    </div>
                </el-table-column>

            </el-table>
        </div>

        <!--工具条 分页-->
        <section style="padding: 15px 0 0 0">
            <el-pagination
                    @size-change="pageSizeChange"
                    @current-change="currentChange"
                    :current-page="pageInfo.currentPage"
                    :page-size="pageInfo.pageSize"
                    :page-sizes="pageInfo.pageSizes"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :background="true"
            ></el-pagination>
        </section>

    </div>

    <!--  右键菜单  -->
    <TableContextMenu v-if="contextMenuVisible"
                      :top="top"
                      :left="left"
                      v-model:visible="contextMenuVisible"
                      :rowData="rowData"
                      :prop="prop"
                      @queryData="queryData"
                      :searchData="searchData"
    />

    <search
            :searchData="searchData"
            :search="queryData"
            :searchVisible="searchVisible"
            @searchVisibleChange="searchVisibleVaChange"
            title="sdw">

    </search>


</template>
<script>
    import search from "@/components/VaSearch";
    import TableContextMenu from "@/components/TableContextMenu";
    import {ref, toRefs, getCurrentInstance} from 'vue'
    import _ from "lodash";


    export default {
        name: "VaMultTable",
        emits: ['searchVisibleChange'],
        components: {TableContextMenu, search},
        props: {
            requestApi: {
                type: Function,
                default: () => ({})
            },
            page: {
                type: Object,
                default: () => ({
                    pageSize: 10,
                    pageSizes: [10, 20, 50, 100], // 每页条数下拉选项
                    currentPage: 1 // 默认当前页
                })
            },
            url: {
                type: String,
                default: ""
            },
            param: {
                type: Object
            },
            height: {
                type: String,
                default: "529px"
            },
            highlight: {
                type: Boolean,
                default: true
            },
            showPage: {
                type: Boolean,
                default: true
            },
            mult: {
                type: Boolean,
                default: false
            },
            maxHeight: {
                type: String,
                default: "100%"
            },
            children: {
                type: String,
                default: null
            },
            tableHead: {
                type: Array,
                default: () => []
            },
            multTable: {
                type: Array,
                default: () => []
            },
            dbClickEvent: {
                type: String
            },
            selection: {
                type: Boolean,
                default: false
            },
            operation: {
                type: Boolean,
                default: false
            },
            actionsData: {
                type: Object,
                default: () => ({})
            },
            sortFunc: {
                type: Object,
                default: () => ({})
            },
            isSelectBar: {
                type: Boolean,
                default: false
            },
            searchData: {
                type: Array,
                default: () => []
            },
            searchVisible: {
                type: Boolean,
                default: false
            },
        },
        created() {
            this.queryData()
        },
        setup(props, {emit}) {
            const {proxy} = getCurrentInstance()

            const {requestApi} = toRefs(props)

            let top = ref(10)

            let left = ref(10)

            let contextMenuVisible = ref(false) //是否显示加载状态

            let rowData = ref({})

            let prop = ref('')

            let tableData = ref([])  // 列表数据集

            let selectionNumber = ref(0) // 选择数量

            let total = ref(0) // 选择数量

            let isLoading = ref(false) //是否显示加载状态

            let pageInfo = ref(props.page) // 分页设置

            // 查询数据
            const queryData = (param) => {


                let requestParam = proxy.$common.arrConvertSearchParam(props.searchData, pageInfo.value);
                console.log("==requestParam b==")
                console.log(requestParam)
                requestParam = _.merge(requestParam, param);
                console.log("==requestParam a==")
                console.log(requestParam)
                isLoading.value = true;
                requestApi.value(requestParam)
                    .then(response => {
                        tableData.value = response.list;
                        let pa = pageInfo.value.pageSize - tableData.value.length;
                        for (let i = 0; i < pa; i++) {
                            // tableData.value.push(null)
                        }
                        total.value = response.total;
                        isLoading.value = false;
                    }).catch(e => {
                    console.log("异常--------", e);
                    isLoading.value = false;
                });


            }

            /**
             * 分页切换
             */
            const currentChange = (val) => {
                pageInfo.value.currentPage = val;
                queryData()

            }

            /**
             * 每页记录数切换
             */
            const pageSizeChange = (val) => {
                pageInfo.value.pageSize = val;
                queryData()


            }

            const rightClick = (event, column, row) => {
                contextMenuVisible.value = true
                left.value = event.screenX
                top.value = event.clientY
                rowData.value = row
                prop.value = column
            }

            const addressColClick = (row, column, event) => {
                event.preventDefault();
                console.log(row, column, event)
                contextMenuVisible.value = true
                left.value = event.screenX
                top.value = event.clientY
                rowData.value = row
                prop.value = column.property
            }

            const searchVisibleVaChange = () => {
                emit("searchVisibleChange")
            }


            return {
                //function
                pageSizeChange,
                currentChange,
                rightClick,
                addressColClick,
                queryData,
                searchVisibleVaChange,
                //data
                selectionNumber,
                isLoading,
                tableData,
                total,
                pageInfo,
                //右键菜单
                contextMenuVisible,
                top,
                left,
                rowData,
                prop
            }
        }
    }
</script>

<style lang="less" scoped>
    .zc-table {
        .el-dropdown-link {
            cursor: pointer;
            color: #1690fe;
            font-size: 12px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .moreLinkSpan {
            display: inline-block;
            margin-left: 10px;
        }

        .underline:hover {
            color: #9aa4e9;
        }

        .el-dropdown-link {
            margin-left: 10px;
        }

        .colRed {
            color: rgb(255, 0, 0);
        }
    }

    .sub-body {
        width: 100%;
        height: 100%;
    }

    .col-address {
        .sub-body {
            min-height: 37px;
            line-height: 37px;
        }
    }

</style>